{% load bootstrap %}

<button type="button" class="btn btn-primary btn-lg btn-block" data-toggle="modal" data-target="#recommendModal">
    <span class="glyphicon glyphicon-share-alt"></span>投递原文
</button>

<div class="modal fade" id="recommendModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title">投递原文</h4>
            </div>
            <div class="modal-body">
                <form method="post" id="recommendForm">
                    {% csrf_token %}
                    {{ recommendForm|bootstrap }}
                </form>
                <h5 id="successful">原文投递成功, <a href="#" data-dismiss="modal">关闭此窗口</a></h5>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" id="recommend">提交</button>
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                <script>
                    $("#recommendModal").on("show.bs.modal", function () {
                        $("#recommendModal #recommendForm").show();
                        $("#recommendModal #successful").hide();
                        $("#recommendModal .modal-footer").show();

                        $("#recommendForm #id_category").val("");
                        $("#recommendForm #id_original_title").val("");
                        $("#recommendForm #id_original_link").val("");
                        $("#recommendForm #id_title").val("");
                    });

                    $("#recommend").click(function() {
                        $.ajax({
                            type: "POST",
                            url: "{% url 'translations:recommend' %}",
                            dataType: "json",
                            data: $("#recommendModal #recommendForm").serialize(),
                            success: function(data) {
                                $("#recommendModal #recommendForm").hide();
                                $("#recommendModal #successful").show();
                                $("#recommendModal .modal-footer").hide();
                            }
                        });
                    });
                </script>
            </div>
        </div>
    </div>
</div>